<template>
  <div class = "config-nav-bar">
    <div class = "nav-bar-left">
      <span><user-icon icon = "flow"/>流水线</span>
    </div>
    <div class = "nav-bar-right">
      <el-button @click = "btnOperation(3)" link title = "" type = "primary">
        <user-icon icon = "search"/>
        <el-tooltip content = "搜索流水线">搜索流水线</el-tooltip>
      </el-button>
      <el-select placeholder = "请选择迭代版本">
        <el-option label = "版本1" value = "version1"/>
        <el-option label = "版本2" value = "version3"/>
        <el-option label = "版本3" value = "version2"/>
      </el-select>
      <el-button @click = "btnOperation(3)" link title = "" type = "primary">
        <user-icon icon = "fa-filter"/>
        <el-tooltip content = "筛选">筛选</el-tooltip>
      </el-button>

      <el-button @click = "btnOperation(3)" link title = "" type = "primary">
        <user-icon icon = "plus-square"/>
        <el-tooltip content = "查看全部">查看全部</el-tooltip>
      </el-button>
      <el-button @click = "btnOperation(1)" link title = "" type = "primary">
        <user-icon icon = "plus"/>
        <el-tooltip content = "新建流水线">新建流水线</el-tooltip>
      </el-button>
    </div>
  </div>

  <div style = "height: 60px;"></div>

  <instance-item></instance-item>
  <instance-item></instance-item>
  <instance-item></instance-item>
  <instance-item></instance-item>
  <instance-item></instance-item>
  <instance-item></instance-item>
  <instance-item></instance-item>
  <instance-item></instance-item>
  <instance-item></instance-item>

</template>
<style lang = "scss" scoped>

.config-nav-bar {

  .nav-bar-right {
    display: flex;
    position: relative;
    right: 15px;
    flex-direction: row;
  }
}
</style>
<script>

import {ref} from "vue";
import {common} from "../../api/common";
import InstanceItem from "./InstanceItem";

export default {
  name: "ContinusInstanceConfig",
  components: {InstanceItem},
  mixins: [common],
  setup() {
    return {}
  },
  data() {
    const loadByPageUrl = ref("/devops-continus/continus/continusInstance/pageList");
    const mergeUrl = ref("/devops-continus/continus/continusInstance/merge");
    const mergeDraftUrl = ref("/devops-continus/continus/continusInstance/mergeDraft");
    const batchMergeUrl = ref("/devops-continus/continus/continusInstance/mergeBatch");
    const batchMergeDraftUrl = ref("/devops-continus/continus/continusInstance/mergeBatchDraft");
    const loadByIdUrl = ref("/devops-continus/continus/continusInstance/getById");
    const deleteUrl = ref("/devops-continus/continus/continusInstance/batchDeleteByIdLogic");
    const exportAllUrl = ref("/devops-continus/continus/continusInstance/exportData");
    const downloadTemplateUrl = ref("/devops-continus/continus/continusInstance/downloadTemplate");
    const uploadUrl = ref("/devops-continus/continus/continusInstance/importData");
    const userConditionUrl = ref("/devops-continus/continus/continusInstance/getAllByCondition");
    const primaryKey = "idContinusInst";
    return {
      loadByPageUrl,
      mergeUrl,
      mergeDraftUrl,
      batchMergeUrl,
      batchMergeDraftUrl,
      loadByIdUrl,
      deleteUrl,
      exportAllUrl,
      downloadTemplateUrl,
      uploadUrl,
      userConditionUrl,
      primaryKey
    }
  },
  methods: {
    addDataFun() {
      this.$router.push("/continus/instanceInit");
    },
    dataFormat(row, column, cellValue, index) {
      cellValue = this.commonDataFormat(row, column, cellValue, index);
      return cellValue;
    },
    /**
     * 初始化数据
     */
    init: function () {
      this.dataList = [];
      this.selectData = [];
      this.loadByPage(this.currentPage, this.pageSize);
      this.loadPermissionResources();
      this.commonSelectData("cts_continus_instance");
    },

    parseSearchData: function () {
      let data = this.searchForm;
      let arr = [];
      if (data.statusName) {
        arr.push({
          propertyName: "statusName",
          value: data.statusName,
          operation: "lk"
        });
      }
      if (data.createdDate) {
        arr.push({
          propertyName: "createdDate",
          value: data.createdDate,
          operation: "bt"
        });
      }
      return arr;
    }
  },
  created() {
    // this.init();
  }
}
</script>